<template>
  <a-modal
    :title="$t('会员规则')"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    class="customHeight customHeightChild modal_title"
    v-drag
  >
    <template slot="footer">
      <a-button key="come" @click="handleCancel">{{ $t('关闭') }}</a-button>
    </template>
    <a-spin style="min-height: 500px" :spinning="confirmLoading" ref="modalcontent" class="tableSpinPadding">
      <a-tabs v-model="activeKey" @change="callback" :tabBarStyle="tabBarStyle">
        <a-tab-pane key="1" :tab="$t('会员折扣')">
          <rule-discount-form ref="discountForm" @ok="updateData"/>
        </a-tab-pane>
        <a-tab-pane key="2" :tab="$t('续期规则')">
          <rule-renewal-form ref="renewalForm"/>
        </a-tab-pane>
        <a-tab-pane key="3" :tab="$t('晋级规则')">
          <rule-promote-form ref="promoteForm"/>
        </a-tab-pane>
        <a-tab-pane key="4" :tab="$t('彩票规则')">
          <rule-lottery-form  ref="lotteryForm"/>
        </a-tab-pane>
        <a-tab-pane key="5" :tab="$t('权益设置')">
          <rule-equity-form ref="equityForm"/>
        </a-tab-pane>
        <a-tab-pane key="6" :tab="$t('其它规则')">
          <rule-more-form ref="moreForm" @ok="updateData"/>
        </a-tab-pane>
      </a-tabs>
    </a-spin>
    
  </a-modal>
</template>

<script>
import moment from 'moment'
import { getAction, putAction } from '@/api/manage'
import RuleDiscountForm from './RuleDiscountForm'
import RuleRenewalForm from './RuleRenewalForm'
import RulePromoteForm from './RulePromoteForm'
import RuleLotteryForm from './RuleLotteryForm'
import RuleEquityForm from './RuleEquityForm'
import RuleMoreForm from './RuleMoreForm'

export default {
  name: 'RuleSetModal',
  components: { 
    RuleDiscountForm,
    RuleRenewalForm,
    RulePromoteForm,
    RuleLotteryForm,
    RuleEquityForm,
    RuleMoreForm
  },
  data() {
    return {
      moment,
      tabBarStyle: {
        'font-weight': 'bold',
      },
      title: '',
      width: 1100,
      visible: false,
      disableSubmit: false,
      confirmLoading: false,
      activeKey: '1',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      model: {},
      validatorRules: {
      },
    }
  },
  created() {
  },
  methods: {
    updateData(){
      this.$emit('ok')
      getAction('/member/bisMemberRule/list',{id: this.model.id}).then(res => {
        if(res.success){
          this.model = Object.assign({}, res.result.records[0])
        }else{

        }
      })
    },
    add() {
      this.visible = true
    },
    edit(record) {
      this.visible = true
      this.model = Object.assign({}, record)
      this.activeKey = '1'
      this.callback('1')
    },
    callback(key, arg) {
      if (key == '1') {
        this.$nextTick(()=>{
          this.$refs.discountForm.disableSubmit = this.disableSubmit
          this.$refs.discountForm.edit(this.model);
        })
      }
      if (key == '2') {
        this.$nextTick(()=>{
          this.$refs.renewalForm.disableSubmit = this.disableSubmit
          this.$refs.renewalForm.edit(this.model);
        })
      }
      if (key == '3') {
        this.$nextTick(()=>{
          this.$refs.promoteForm.disableSubmit = this.disableSubmit
          this.$refs.promoteForm.edit(this.model);
        })
      }
      if (key == '4') {
        this.$nextTick(()=>{
          this.$refs.lotteryForm.disableSubmit = this.disableSubmit
          this.$refs.lotteryForm.edit(this.model);
        })
      }
      if (key == '5') {
        this.$nextTick(()=>{
          this.$refs.equityForm.disableSubmit = this.disableSubmit
          this.$refs.equityForm.edit(this.model);
        })
      }
      if (key == '6') {
        this.$nextTick(()=>{
          this.$refs.moreForm.disableSubmit = this.disableSubmit
          this.$refs.moreForm.edit(this.model);
        })
      }
    },
    close() {
      this.visible = false
    },
    handleCancel() {
      this.close()
    }
  },
}
</script>
<style scoped>
.customHeight.customHeightChild .customForm >>> .ant-form-item-label {
  background: none;
  border: none;
}
.customHeight
  .smallTable
  >>> .ant-table-small
  > .ant-table-content
  > .ant-table-body
  > table
  > .ant-table-thead
  > tr
  > th {
  background-color: rgb(205, 210, 233);
  font-size: 14px;
  font-weight: 600;
  border-right: 1px solid white;
  color: 'rgb(49,49,49)';
}
.customHeight.customHeightChild .customForm >>> .ant-form-item-control-wrapper {
  border: none;
}
.customHeight.customHeightChild >>> .ant-form-item .ant-form-item-control {
  height: auto;
}
.noImageError .has-error .ant-form-explain {
  position: absolute;
  bottom: 2px;
}
.noImageError .ant-upload.ant-upload-select-picture-card,
.noImageError .ant-upload-list-picture-card-container {
  width: 90px;
  height: 90px;
  margin-bottom: 11px;
}
.cus-form {
  margin-top: 10px;
}
</style>